import React from "react";
// 引入封装的获取当前定位城市方法
import { getCurrentCity } from "../../utils/utils.js"
//导入antd-mobile组件
import { Carousel , Flex , Grid } from "antd-mobile";
// 导入导航菜单图片
import Nav1 from "../../assets/images/nav-1.png"
import Nav2 from "../../assets/images/nav-2.png"
import Nav3 from "../../assets/images/nav-3.png"
import Nav4 from "../../assets/images/nav-4.png"
// 导入样式表
import "./index.less"
// 导航菜单数据
const navImgs = [
  {
    id: 1 ,
    img: Nav1 ,
    title: "整租" ,
    path: "/home/list"
  } ,
  {
    id: 2 ,
    img: Nav2 ,
    title: "合租" ,
    path: "2"
  } ,
  {
    id: 3 ,
    img: Nav3 ,
    title: "地图找房" ,
    path: "3"
  } ,
  {
    id: 4 ,
    img: Nav4 ,
    title: "去出租" ,
    path: "4"
  } ,
]

// 获取地理位置信息 z
navigator.geolocation.getCurrentPosition( (position,showError )=> {
  console.log("当前位置信息",position);
});

export default class Index extends React.Component {
  state = {
    area: "AREA|88cff55c-aaa4-e2e0", // 地区ID

    swipers: [] , // 轮播图状态数据
    swipersLoaded: false , // 轮播图数据是否获取完成
    imgHeight: 212 , // 轮播图图片高度

    groups: [], // 租房小组数据
    news:[] , // 最新资讯数据

    cityData:{label:"上海"} // 城市信息
  };

  // 获取轮播图数据
  getSwipers = async () => {
    const { data: res } = await React.$http.get ( "home/swiper" );
    if ( res.status !== 200 ) return console.error ( "请求轮播图数据失败，请重试!" );
    this.setState ( () => ( {
      swipers: res.body ,
      swipersLoaded: true
    } ) )
  }

  // 获取租房小组数据
  getGroups = async () => {
    const { data: res } = await React.$http.get ( "home/groups" , {
      params: {
        area: this.state.area
      }
    } )
    if ( res.status !== 200 ) return console.error ( "租房小组数据获取失败，请重试!" );
    this.setState (
      () => ( {
        groups: res.body
      } )
    )
  }

  // 获取最新资讯数据
  getNews = async () =>{
    const { data :res } = await React.$http.get("home/news", {
      params : {
        area: this.state.area
      }
    })
    if ( res.status !== 200 ) return console.error("最新资讯数据获取失败，请重试！");
    this.setState(()=>({
      news : res.body
    }))
  }
  // 获取城市信息
  getCityData = async () =>{
    // 通过IP定位获取到当前城市名称。
    const res = await getCurrentCity();
      this.setState(()=>(
        {
          cityData: res // 这里通过接口获得的数据与定位的城市不符，是因为接口只做了北上广深的四个地方的数据，如果不在这四个地方，默认返回上海。
        }
      )) ;
  }
  // 渲染页面
  componentDidMount () {
    // 获得轮播图数据
    this.getSwipers ();
    // 获取租房小组数据
    this.getGroups ();
    // 获取最新资讯数据
    this.getNews ();
    // 获取当前城市信息
    this.getCityData();
  }

  componentDidUpdate () {
  }

  //渲染轮播图结构
  /*
  *   轮播图组件的问题：不切换。
  *   原因：轮播图的数据是动态加载的，轮播图加载前后数量
  *   解决：条件渲染轮播图组件，创建标识变量，轮播图图片数据获取完成后将该变量设为true，否则为false。为true时再渲染轮播图组件
  * */
  renderSwipers = () => {
    if ( !this.state.swipersLoaded ) return ( <div className={ "swiper" }/> )
    return (
      /*轮播图组件*/
      <Carousel
        autoplay={ true } // 轮播图是否自动播放
        infinite // 是否循环播放
      >
        {/*// 子节点：遍历数据并渲染数据*/ }
        { this.state.swipers.map ( ( item ) => (
          <a
            key={ item.id }
            href="http://itcast.cn"
            style={ {
              display: "inline-block" ,
              width: "100%" ,
              height: this.state.imgHeight ,
            } }
          >
            <img
              src={ React.BASE_URL + item.imgSrc  }
              alt=""
              style={ {
                width: "100%" ,
                verticalAlign: "top" ,
              } }
              onLoad={ () => {
                // fire window resize event to change height
                window.dispatchEvent ( new Event ( "resize" ) );
                this.setState ( { imgHeight: "auto" } );
              } }
            />
          </a>
        ) ) }
      </Carousel>
    )
  }
  // 渲染搜索框
  renderSearch = () => {
    return (
     <Flex className="search-box">
       <Flex className="search">
         {/*点击城市，跳转到城市选择页面*/}
         <div className="location" onClick={()=>this.props.history.push("/citylist")}>
            <span className={"name"}>{this.state.cityData.label}</span>
           <i className={"iconfont icon-arrow"}/>
         </div>
         {/*点击搜索跳转到搜索页面*/}
         <div className="form" onClick={()=>this.props.history.push("/search")}>
           <i className="iconfont icon-seach"/>
           <span className="text">请输入小区或地址</span>
         </div>
       </Flex>
       {/*点击跳转到地图页面*/}
       <i onClick={()=>this.props.history.push("/map")} className="iconfont icon-map"/>
     </Flex>
    )
  }
  // 渲染导航菜单item
  renderNav = () => {
    return (
      navImgs.map ( ( item ) => (
        <Flex.Item key={ item.id } onClick={ () => this.props.history.push ( item.path ) }>
          <img src={ item.img } alt={ item.title }/>
          <h2>{ item.title }</h2>
        </Flex.Item>
      ) )
    )
  }

  // 渲染租房小组
  renderGroups = () => {
    return (
      <div className={ "groups" }>
        <div className={ "groups-header" }>
          <span className={ "title" }>租房小组</span>
          <span className={ "more" }>更多</span>
        </div>
        {/*Grid组件 data：数据源 activeStyle:点击时是否反馈样式
          columnNum：列数  square：每个格子是否固定为正方形 hasLine：是否有边框
        */ }
        <Grid  square={ false } hasLine={ false } data={ this.state.groups } columnNum={ 2 }
              renderItem={ this.renderGridItem }/>
      </div>
    )
  }
  // 渲染租房小组的菜单项
  renderGridItem = ( item ) => {
    return (
      <Flex className={ "gridItemFlex" }
            justify={ "around" }
            key={ item.id }
      >
        <div className={ "desc" }>
          <p className={ "grid-title" }>{ item.title }</p>
          <span className={ "info" }>{ item.desc }</span>
        </div>
        <img src={React.BASE_URL + item.imgSrc } alt=""/>
      </Flex>
    )
  }

  // 渲染最新资讯
  renderNews = () => {
    return (
      <div className={"news"}>
        <div className={"news-header"}>
          <p>最新资讯</p>
        </div>
        { this.state.news.map((item) => (
          <Flex key={item.id}>
            <div className={"imgwarp"}>
              <img src={React.BASE_URL + item.imgSrc } alt=""/>
            </div>
            <div className={"newsText"}>
              <span className={"title"}>{item.title}</span>
              <div className={"newsInfo"}>
                <span>{item.from}</span>
                <span>{item.date}</span>
              </div>
            </div>
          </Flex>
        ))}
      </div>
    )
  }
  render () {
    return (
      <div className={ "index" }>
        {/*条件渲染轮播图组件*/ }
        { this.renderSwipers () }
        {/*  Flex布局组件*/ }
        <Flex className={ "nav" }>
          { this.renderNav () }
        </Flex>
        {/*  租房小组*/ }
        { this.renderGroups () }
      {/*  最新资讯*/}
        {this.renderNews()}
      {/*  搜索框*/}
        {this.renderSearch()}
      </div>
    );
  }
}
